<script setup>
import { ref, onMounted } from 'vue'
import { getWorkbenchInfoAPI } from '@/api/workbench'
import InfoWrapper from './components/InfoWrapper.vue'
import CountUp from 'vue-countup-v3'
// 按需导入echarts
import * as echarts from 'echarts/core'
import { BarChart } from 'echarts/charts'
import { CanvasRenderer } from 'echarts/renderers'
import { GridComponent, TooltipComponent, LegendComponent } from 'echarts/components'
echarts.use([BarChart, GridComponent, TooltipComponent, LegendComponent, CanvasRenderer])

// 柱状图渲染
const barChartRef = ref(null)
const initBartChart = () => {
  const { x_month, y_user, y_tourist } = workbenchInfo.value
  const barOptions = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      },
      formatter(params) {
        return `${params[0].axisValueLabel}<br/>留言总数：${params[0].value + params[1].value}<br/>${
          params[0].seriesName
        }：${params[0].value}<br/>${params[1].seriesName}：${params[1].value}`
      }
    },
    legend: {
      orient: 'vertical',
      right: '10'
    },
    grid: {
      left: '3%',
      right: '3%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: [
      {
        type: 'category',
        data: formatMonth(x_month)
      }
    ],
    yAxis: [
      {
        type: 'value'
      }
    ],
    series: [
      {
        name: '用户',
        type: 'bar',
        stack: 'total',
        barWidth: '20',
        data: y_user,
        itemStyle: {
          color: '#4338ca'
        }
      },
      {
        name: '游客',
        type: 'bar',
        stack: 'total',
        barWidth: '20',
        data: y_tourist,
        itemStyle: {
          color: '#4338ca6b'
        }
      }
    ]
  }
  const myBarChart = echarts.init(barChartRef.value)
  myBarChart.setOption(barOptions)
  window.addEventListener('resize', () => {
    myBarChart.resize()
  })
}

// 获取数据
const workbenchInfo = ref({
  visit_count: 0,
  user_count: 0,
  leaveword_count: 0,
  leaveword_wall_count: 0,
  image_wall_count: 0
})
const getData = async () => {
  try {
    workbenchInfo.value = await getWorkbenchInfoAPI()
    if (barChartRef.value) initBartChart()
  } catch (err) {}
}

// 格式化月份
const formatMonth = (dateArr) => {
  return dateArr.map((item) => parseInt(item.split('-')[1]) + '月')
}

onMounted(() => {
  getData()
})
</script>

<template>
  <div class="workbench-container">
    <div class="left">
      <!-- 网站数据 -->
      <info-wrapper title="网站数据" style="height: 148px">
        <div class="info">
          <div class="item">
            <span class="label">访问总数（次）</span>
            <count-up class="value" :end-val="workbenchInfo.visit_count"></count-up>
          </div>
          <div class="item">
            <span class="label">用户总数（个）</span>
            <count-up class="value" :end-val="workbenchInfo.user_count"></count-up>
          </div>
          <div class="item">
            <span class="label">留言总数（条）</span>
            <count-up class="value" :end-val="workbenchInfo.leaveword_count"></count-up>
          </div>

          <div class="item">
            <span class="label">留言墙（条）</span>
            <count-up class="value" :end-val="workbenchInfo.leaveword_wall_count"></count-up>
          </div>
          <div class="item">
            <span class="label">照片墙（条）</span>
            <count-up class="value" :end-val="workbenchInfo.image_wall_count"></count-up>
          </div>
        </div>
      </info-wrapper>
      <!-- 年度收入统计 -->
      <info-wrapper title="年度留言统计">
        <div ref="barChartRef" class="barChart"></div>
      </info-wrapper>
      <!-- 近期举报数据 -->
      <info-wrapper title="近期举报数据">
        <el-table :data="workbenchInfo.report">
          <el-table-column label="留言id" prop="leaveword_id" />
          <el-table-column label="签名" show-overflow-tooltip>
            <template #default="{ row }">{{ row.leaveword.name }}</template>
          </el-table-column>
          <el-table-column label="留言内容" show-overflow-tooltip>
            <template #default="{ row }">{{ row.leaveword.content }}</template>
          </el-table-column>
          <el-table-column label="举报时间" prop="created_time" width="180" />
        </el-table>
      </info-wrapper>
    </div>
    <div class="right">
      <!-- 快捷入口 -->
      <info-wrapper title="快捷入口" style="height: 148px">
        <div class="info">
          <div class="item link" @click="$router.push('/leaveword/list')">
            <svg-icon class="icon" icon-name="w_leaveword" />
            <span class="label">留言列表</span>
          </div>
          <div class="item link" @click="$router.push('/leaveword/feedback')">
            <svg-icon class="icon" icon-name="w_feedback" />
            <span class="label">反馈管理</span>
          </div>
          <div class="item link" @click="$router.push('/wall/label')">
            <svg-icon class="icon" icon-name="w_label" />
            <span class="label">标签管理</span>
          </div>
          <div class="item link" @click="$router.push('/wall/color')">
            <svg-icon class="icon" icon-name="w_color" />
            <span class="label">颜色管理</span>
          </div>
        </div>
      </info-wrapper>
      <!-- 告警 -->
      <info-wrapper title="网站告警">
        <div class="warn-list">
          <svg-icon icon-name="empty" style="width: 160px; height: 160px"></svg-icon>
          <el-button type="primary" class="more-btn" @click="$router.push('/leaveword/feedback')"
            >更多 ></el-button
          >
        </div>
      </info-wrapper>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.workbench-container {
  display: flex;
  .info {
    display: flex;
    justify-content: space-between;
  }
  .left {
    flex-basis: 70%;
    margin-right: 20px;
    .item {
      display: flex;
      flex-direction: column;
      line-height: 1.5;
      .label {
        color: #909399;
        margin-bottom: 12px;
      }
      .value {
        color: #303035;
        font-weight: 500;
        font-size: 24px;
      }
    }
  }
  .right {
    flex-basis: calc(30% - 20px);
    .item {
      display: flex;
      flex-direction: column;
      align-items: center;
      .icon {
        width: 35px;
        height: 35px;
        margin-bottom: 12px;
      }
      .label {
        font-size: 12px;
        font-weight: 500;
      }
    }
  }
}

.link {
  cursor: pointer;
}
.barChart {
  width: 100%;
  height: 300px;
}
.page-container {
  margin-top: 10px;
  padding: 4px 0px;
  text-align: right;
}
.warn-list {
  display: flex;
  flex-direction: column;
  align-items: center;
  .more-btn {
    margin-top: 20px;
    width: 100%;
    height: 36px;
    border-radius: 18px;
  }
}
</style>
